使用
CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
数据绑定
括号绑定
{{message}} //括号中可使用表达式 如 {{message+ message}}
指令式绑定
<div v-bind:id="message"></div>
简写形式
<div :id="message"></div>
这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message 属性保持一致”。
响应式
可以这样理解：当一个状态改变之后，与这个状态相关的事务也立即随之改变，从前端来看就是数据状态改变后相关 DOM 也随之改变。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
v-if v-else v-show v-for
<body>
<div id="app">
{{message}}{{message+ message}}
<div :id="message"></div>
<ul>
<li v-for="item in list">
<span v-if="!item.del">{{item.title}}</span>
<span v-else style="text-decoration: line-through;">{{item.title}}</span>
<button v-show="!item.del">删除</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello World",
list: [
{
title: "课程1",
del: false,
},
{
title: "课程2",
del: true,
},
],
},
});
</script>
</body>
组件
Vue.component("todo-item",{
props:{
title: String,
del: {
type: Boolean,
default: false,
},
},
template: `
<li >
<span v-if="!del">{{title}}</span>
<span v-else style="text-decoration: line-through;">{{title}}</span>
<button v-show="!del">删除</button>
</li>
`,
data: function(){
return {}
},
methods: {
},
})
Vue.component("todo-list", {
template: `
<ul>
<todo-item v-for="item in list" :title="item.title" :del="!item.del"></todo-item>
</ul>
`,
data: function () {
return {
list: [
{
title: "课程1",
del: false,
},
{
title: "课程2",
del: true,
},
]}
}
})
组件中data 不能使用同一个data,因为pass by reference ，在一个地方改变，其他地方也会改变。data要求唯一化。
